<template>
	<view class="container">
		<!--货品详情.开始-->
		<view class="order-item">
			<view v-for="(item,index) in model.refundGoods" :key="index" class="goods-box">
				<view class="img-box">
					<image mode="widthFix" :src="$api.loadFile(item.orderGoods.imgUrl)"></image>
				</view>
				<view class="right">
					<text class="title">{{item.orderGoods.goodsTitle}}</text>
					<text class="attr">{{item.orderGoods.skuText}}  x {{item.orderGoods.quantity}}</text>
					<text class="price">{{item.orderGoods.realPrice}}</text>
				</view>
			</view>
		</view>
		<!--货品详情.结束-->
		
		<!--订单金额.开始-->
		<view v-if="model.type===1&&model.handleStatus===3" class="group-box">
			<view class="item-list">
				<view class="list-box">
					<text class="title">退款金额</text>
					<view class="remark right">
						<text class="price bold">￥{{model.refundAmount}}</text>
					</view>
				</view>
			</view>
		</view>
		<!--订单金额.结束-->
		
		<!--订单信息.开始-->
		<view class="group-box">
			<view class="item-list">
				<view class="list-box">
					<text class="title">处理状态</text>
					<text v-if="model.handleStatus===1" class="remark">待买家寄回</text>
					<text v-else-if="model.handleStatus===2" class="remark">待商家发货</text>
					<text v-else-if="model.handleStatus===3" class="remark">已完成</text>
					<text v-else-if="model.handleStatus===4" class="remark">拒绝</text>
					<text v-else class="remark">处理中</text>
				</view>
				<view v-if="model.handleTime" class="list-box">
					<text class="title">处理时间</text>
					<text class="remark">
						{{model.handleTime}}
					</text>
				</view>
				<view v-if="model.handleRemark" class="list-box">
					<text class="title">处理说明</text>
					<view class="remark">{{model.handleRemark}}</view>
				</view>
			</view>
		</view>
		<!--订单信息.结束-->
		
		<!--订单信息.开始-->
		<view class="group-box">
			<view class="item-list">
				<view class="list-box">
					<text class="title">订单编号</text>
					<text class="remark">{{model.orderNo}}</text>
				</view>
				<view class="list-box">
					<text class="title">售后类型</text>
					<text v-if="model.type===1" class="remark">申请退款</text>
					<text v-else class="remark">申请换货</text>
				</view>
				<view class="list-box">
					<text class="title">申请时间</text>
					<text class="remark">
						{{model.applyTime}}
					</text>
				</view>
				<view class="list-box">
					<text class="title">申请理由</text>
					<view class="remark">{{model.applyReason}}</view>
				</view>
				<view class="album-box">
					<view v-for="(item,index) in model.refundAlbums" :key="index" class="img-box">
						<image @click="viewImage(index)" mode="widthFix" :src="$api.loadFile(item.thumbPath)"></image>
					</view>
				</view>
			</view>
		</view>
		<!--订单信息.结束-->
		
		<!--买家发货.开始-->
		<view v-if="model.uExpressTime" class="group-box">
			<view class="item-list">
				<view class="list-box">
					<text class="title">买家快递</text>
					<text class="remark">{{model.uExpressTitle}}</text>
				</view>
				<view class="list-box">
					<text class="title">快递单号</text>
					<text class="remark">{{model.uExpressCode}}</text>
				</view>
				<view class="list-box">
					<text class="title">寄回时间</text>
					<text class="remark">{{model.uExpressTime}}</text>
				</view>
			</view>
		</view>
		<!--买家发货.结束-->
		
		<!--卖家发货.开始-->
		<view v-if="model.sExpressTime" class="group-box">
			<view class="item-list">
				<view class="list-box">
					<text class="title">卖家发货</text>
					<text class="remark">{{model.sExpressTitle}}</text>
				</view>
				<view class="list-box">
					<text class="title">快递单号</text>
					<text class="remark">{{model.sExpressCode}}</text>
				</view>
				<view class="list-box">
					<text class="title">发货时间</text>
					<text class="remark">{{model.sExpressTime}}</text>
				</view>
			</view>
		</view>
		<!--卖家发货.结束-->
		
		<!--底部按钮.开始-->
		<view v-if="model.handleStatus==1" class="foot-wrap">
			<view class="foot-box">
				<text @click="openPopup('popDelivery')" class="btn">已寄出，填写物流信息</text>
			</view>
		</view>
		<!--底部按钮.结束-->
		
		<!--买家发货.开始-->
		<uni-popup ref="popDelivery" type="bottom">
			<view class="delivery-box">
				<view class="head-box">
					<view class="stitle">
						<text class="title">填写物流信息</text>
					</view>
				</view>
				<scroll-view scroll-y class="list-wrap">
					<view class="form-list">
						<view class="list-box">
							<view class="title">选择快递</view>
							<view class="remark">
								 <picker @change="expressChange" :value="0" :range="expressList" range-key="title">
									<view class="uni-input">{{expressModel.uExpressTitle}}</view>
								</picker>
							</view>
						</view>
						<view class="list-box">
							<view class="title">物流单号</view>
							<view class="remark">
								<input class="input" type="text" v-model="expressModel.uExpressCode" placeholder="物流/快递单号" />
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="foot-box">
					<button @click="submitForm" class="btn">确认提交</button>
				</view>
			</view>
		</uni-popup>
		<!--买家发货.结束-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//售后详情
				model:{
					refundAlbums:[],
					refundGoods:[]
				},
				//快递信息
				expressModel:{
					uExpressId: 0,
					uExpressTitle: '请选择...',
					uExpressCode: null
				},
				//快递列表
				expressList:[]
			}
		},
		methods: {
			//打开弹窗
			openPopup(obj){
				this.$refs[obj].open();
			},
			//关闭弹窗
			closePopup(obj){
				this.$refs[obj].close();
			},
			//选择快递回调
			expressChange(e){
				let _this = this;
				let index = e.target.value;
				let item = _this.expressList[index];
				_this.expressModel.uExpressId = item.id;
				_this.expressModel.uExpressTitle = item.title;
				//console.log(item);
			},
			//提交表单
			async submitForm(){
				let _this = this;
				let id = _this.model.id;
				let model = _this.expressModel;
				if(model.uExpressId===0){
					_this.$api.msg('请选择快递公司');
					return;
				}
				if(!model.uExpressCode){
					_this.$api.msg('请填写快递单号');
					return;
				}
				await _this.$api.request({
					url: `/account/order/refund/return/${id}`,
					method: "put",
					data: model,
				}).then(res=>{
					_this.closePopup('popDelivery');
					_this.$api.msg(`提交成功`, 1500, false, 'success');
					_this.initData(id);
				});
			},
			//初始化数据
			async initData(id){
				let _this = this;
				//正在加载
				uni.showLoading({
				    title: '加载中'
				});
				//加载售后信息
				await _this.$api.request({
					url: `/account/order/refund/${id}`,
				}).then(res=>{
					//console.log(res.data)
					_this.model = res.data;
				});
				//加载快递列表
				await _this.$api.request({
					url: `/client/shop/express/view/0`,
				}).then(res=>{
					_this.expressList = res.data;
					//买家快递名称
					if(_this.model.uExpressId){
						let obj = _this.expressList.find(val=>val.id==_this.model.uExpressId);
						if(obj){
							_this.$set(_this.model,'uExpressTitle',obj.title);
						}
					}
					//商家快递名称
					if(_this.model.sExpressId){
						let obj = _this.expressList.find(val=>val.id==_this.model.sExpressId);
						if(obj){
							_this.$set(_this.model,'sExpressTitle',obj.title);
						}
					}
				});
				//关闭加载
				uni.hideLoading();
			},
			//查看图片
			viewImage(index) {
				let _this = this;
				let urls = _this.model.refundAlbums.map(item=>{
					return _this.$api.loadFile(item.originalPath);
				});
				uni.previewImage({
					urls,
					index
				})
			},
		},
		//页面初始化
		onLoad(options){
			let id = parseInt(options.id);
			this.initData(id);
		}
	}
</script>

<style lang="scss">
	.order-item{
		display: flex;
		flex-direction: column;
		margin: 24rpx 24rpx 0 24rpx;
		border-radius: 20rpx;
		background: #fff;
		.goods-box{
			display: flex;
			padding: 20rpx 0 20rpx 30rpx;
			border-top: 2rpx solid #f5f5f5;
			.img-box{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				width: 136rpx;
				height: 136rpx;
				border-radius: 20rpx;
				background: #f5f5f5;
				image{
					border-radius: 20rpx;
					width: 100%;
				}
			}
			.right{
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 24rpx;
				overflow: hidden;
				.title{
					font-size: 30rpx;
					color: #333;
					line-height: 1;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.attr{
					color: #999;
					font-size: 26rpx;
					line-height: 1;
					padding: 20rpx 0;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.price{
					color: #333;
					font-size:30rpx;
					line-height: 1;
					&:before{
						content: '￥';
						font-size: 24rpx;
					}
				}
				.btn-box{
					display: flex;
					justify-content: flex-end;
					padding-top: 20rpx;
					.btn{
						margin-left: 12rpx;
						padding: 10rpx 30rpx;
						color: #555;
						font-size: 26rpx;
						line-height: 1;
						border: 1px solid #eee;
						border-radius: 100rpx;
					}
				}
			}
		}
	}
	.album-box{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: row wrap;
		margin: 0 -24rpx 2rpx 0;
		padding: 0 24rpx 24rpx 24rpx;
		background: #fff;
		.img-box{
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 24rpx 24rpx 0 0;
			width: 145rpx;
			height: 145rpx;
			image{
				box-sizing: border-box;
				border: 2rpx solid #ccc;
				border-radius: 12rpx;
				width: 100%;
				overflow: hidden;
			}
		}
	}
	.delivery-box{
		box-sizing: border-box;
		padding: 24rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		.foot-box{
			.btn{
				padding: 24rpx 30rpx;
				color: #fff;
				font-size: 26rpx;
				line-height: 1;
				border-radius: 50rpx;
				background: #ff5000;
				&::after{
					border: none;
				}
			}
		}
	}
	.foot-wrap{
		position: relative;
		height: 100rpx;
		.foot-box{
			position: fixed;
			display: flex;
			justify-content: center;
			align-items: center;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0 24rpx;
			background: #fff;
			height: 100rpx;
			border-top: 1px solid rgba($color: #000, $alpha: 0.05);
			.btn{
				padding: 20rpx 30rpx;
				color: #fff;
				font-size: 26rpx;
				line-height: 1;
				border: 2rpx solid #fff;
				border-radius: 100rpx;
				background: #fe3b0f;
				width: 100%;
				text-align: center;
			}
		}
	}
</style>
